<template>
    <div class="risk-assessment-review-result" v-show="changeRequirementData.isRiskLevel && (changeRequirementData.riskLevel === 'High' || changeRequirementData.riskLevel === 'Medium')">
      <el-container>
        <el-header class="header-class" height="22">
          <div class="header-text">Risk Assessment Review Result</div>
        </el-header>
        <el-main class="container-main">
          <el-form label-position="left" :model="riskAssessmentReviewData" :rules="rules" ref="validatorForm" :size="form_size" :label-width="label_width" :show-message="false">
            <el-form-item label="RA Review Result :">
              <permission-slot :readOnly="!this.functionList.edit_change_control_teams_reference" :labelName="riskAssessmentReviewData.riskAssessmentReviewResult">
                <el-radio v-model="riskAssessmentReviewData.riskAssessmentReviewResult" label="High">High</el-radio>
                <el-radio v-model="riskAssessmentReviewData.riskAssessmentReviewResult" label="Medium">Medium</el-radio>
                <el-radio v-model="riskAssessmentReviewData.riskAssessmentReviewResult" label="Low">Low</el-radio>
              </permission-slot>
            </el-form-item>

            <el-form-item label="RA Comment :">
              <permission-slot :readOnly="!this.functionList.edit_change_control_teams_reference" :labelName="riskAssessmentReviewData.riskAssessmentRemark">
                <el-input type="textarea" v-model="riskAssessmentReviewData.riskAssessmentRemark" class="text_area_input"></el-input>
              </permission-slot>
            </el-form-item>

            <el-form-item label="RA Progress :">
              <permission-slot :readOnly="!this.functionList.edit_change_control_teams_reference" :labelName="riskAssessmentReviewData.riskAssessmentProgress">
                <el-radio v-model="riskAssessmentReviewData.riskAssessmentProgress" label="No yet started">No yet started</el-radio>
                <el-radio v-model="riskAssessmentReviewData.riskAssessmentProgress" label="In Progress">In Progress</el-radio>
                <el-radio v-model="riskAssessmentReviewData.riskAssessmentProgress" label="Completed">Completed</el-radio>
              </permission-slot>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
</template>

<script>
import PermissionSlot from '@/base-components/permission/PermissionSlot.vue'

export default {
  name: 'risk-assessment-review-result',
  components: {
    PermissionSlot
  },
  props: {
    riskAssessmentReviewData: {
      type: Object
    },
    changeRequirementData: {
      type: Object
    },
    functionList: {
      type: Object
    }
  },

  data() {
    return {
      form_size: 'mini',
      label_width: '325px',

      rules: {
      }
    }
  },

  methods: {
  }
}
</script>

<style scoped lang="scss">
  @import './../../../common/css/base.scss';

  .container-main {
    border: 1px solid $base-header-color;
  }

  .header-class {
    @include baseHeader(30px)
  }

  .header-text {
    color: #fff;
    margin-top: 5px;
    font-weight: bold;
  }

  .text_area_input {
    margin-bottom: 5px;
    width: 660px;
  }
</style>
